<template>
  <view>
    <!-- 抽奖转盘-->
    <view class="mask" v-if="hbModulfalg == 1" catchtouchmove="true">
      <view class="maskContent">
        <view class="draw_bg">
          <view class="index">
            <view class="xian"></view>
            <view class="xian"></view>
            <view class="xian"></view>
            <view
              class="detail"
              v-for="(item, index) in lotteryValue"
              :key="index"
              >{{ item }}</view
            >
            <view @click="clickTurn" class="pointer">
              <image
                class="draw_icon"
                src="@/static/draw_icon1.png"
                :style="[{ transform: 'rotate(' + trasn + 'deg' + ')' }]"
              ></image>
              <view class="go">GO</view>
            </view>
          </view>
        </view>
        <view @click="clickTurn" class="draw_btn" :class="{ disabled: begin }"
          >开始</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      random: "",
      hbModulfalg: 0, //0-隐藏，1显示
      trasn: 0,
      lotteryValue: ["200元", "20元", "50元", "30元", "100元", "谢谢参与"],
      begin: false,
    };
  },
  onLoad() {},
  methods: {
    open() {
      this.hbModulfalg = 1;
      this.trasn = 0;
      this.begin = false;
    },
    close() {
      this.hbModulfalg = 0;
    },
    // 立即抽奖
    clickTurn: function (e) {
      if (this.begin) return;
      this.begin = true;
      let that = this;
      let num = 0;
      that.trasn = 0;
      let maxNumber = Math.floor(Math.random() * 6);
      const maxNumArr = [4, 5, 6, 7, 8, 9];
      maxNumber = maxNumArr[maxNumber]; //设置随机圈数
      // console.log(maxNumber + "圈");
      let time = setInterval(function () {
        that.trasn = that.trasn + 5;
        if (360 <= that.trasn) {
          that.trasn = 0;
          num = num + 1;
        }
        if (num == maxNumber) {
          that.currinl();
          clearInterval(time);
        }
      }, 5);
    },
    // 指针转动
    currinl: function (e) {
      let that = this;
      let index = "";
      // that.random = Math.floor(Math.random() * 360);
      let random = 240; // 请求接口由后端返回
      // let random = that.random; // 请求接口由后端返回
      // console.log(random, "random");
      if (random < 30 || 330 < random) {
        index = 0;
      } else if (random > 30 && random < 90) {
        index = 1;
      } else if (random > 90 && random < 150) {
        index = 2;
      } else if (random > 150 && random < 210) {
        index = 3;
      } else if (random > 210 && random < 270) {
        index = 4;
      } else {
        index = 5;
      }
      let b = setInterval(function () {
        that.trasn = that.trasn + 2;
        if (random <= that.trasn) {
          clearInterval(b);
          that.$emit("success", index, that.lotteryValue[index]);
          setTimeout(() => {
            that.close();
          }, 2000);
        }
      }, 5);
      // console.info("度数....", random, name);
    },
  },
};
</script>

<style>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.maskContent {
  width: 636rpx;
  height: 715rpx;
  z-index: 2;
  position: relative;
  border-radius: 20rpx;
  text-align: center;
}
.draw_bg {
  width: 651rpx;
  height: 740rpx;
  background-image: url(@/static/turn_bg.png);
  background-size: 100% 100%;
  padding-top: 1px;
}
.index {
  width: 510rpx;
  margin: auto;
  margin-top: 90rpx;
  border-radius: 50%;
  height: 510rpx;
  position: relative;
  overflow: hidden;
  font-size: 26rpx;
}
.xian {
  width: 510rpx;
  height: 1px;
  background: #d6d6d6;
  position: absolute;
  top: 240rpx;
  left: 0;
}
.index > .xian:nth-child(2) {
  transform: rotateZ(60deg);
}
.index > .xian:nth-child(3) {
  transform: rotateZ(120deg);
}
.detail {
  position: absolute;
  color: #d10002;
  font-size: 28rpx;
  font-weight: bold;
  width: 170rpx;
}
.index > .detail:nth-child(4) {
  top: 44rpx;
  left: 170rpx;
}
.index > .detail:nth-child(5) {
  top: 123rpx;
  left: 324rpx;
  transform: rotate(60deg);
}
.index > .detail:nth-child(6) {
  top: 312rpx;
  left: 324rpx;
  transform: rotate(120deg);
}
.index > .detail:nth-child(7) {
  top: 400rpx;
  left: 170rpx;
  transform: rotate(180deg);
}
.index > .detail:nth-child(8) {
  top: 310rpx;
  left: 22rpx;
  transform: rotate(240deg);
}
.index > .detail:nth-child(9) {
  top: 134rpx;
  left: 22rpx;
  transform: rotate(300deg);
}
.pointer {
  width: 350rpx;
  height: 350rpx;
  margin: auto;
  margin-top: 70rpx;
  text-align: center;
  line-height: 350rpx;
  font-size: 40rpx;
  color: #ffffff;
  position: relative;
}
.go {
  padding-left: 96rpx;
}
.draw_icon {
  width: 350rpx;
  height: 350rpx;
}
.pointer view {
  width: 158rpx;
  height: 166rpx;
  position: absolute;
  top: 0;
  text-align: center;
}
.draw_btn {
  width: 430rpx;
  height: 100rpx;
  background: linear-gradient(180deg, #ec693e 0%, #e72b18 100%);
  border-radius: 50rpx;
  margin: auto;
  margin-top: 42rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 36rpx;
  color: #fdf3d7;
}
.disabled {
  background: #999;
}
</style>
